<template>
  <div class="repairs">
    <head-top head-title="物业报修" hidden='true' repairs-publish="发布" go-back="true"></head-top>
    <!--<head-top head-title="物业报修" hidden='true' repairs-publish="发布" go-back="true" @repairsPublish="$router.push('/publish/Repair')"></head-top>-->
    <div class="banner-wrapper">
    </div>
    <div class="box">
      <!--分类部分-->
      <div class="menu-wrapper" ref="menuWrapper">
        <mt-navbar v-model="selected">
          <mt-tab-item :id="index" v-for="(item, index) in repairData" :key="index">{{item.type}}</mt-tab-item>
        </mt-navbar>
      </div>
      <!--内容展示部分-->
      <div class="repair-wrapper " ref="repairWrapper">
        <mt-tab-container v-model="selected">
          <mt-tab-container-item :id="index" v-for="(item, index) in repairData" :key="index">
             <ul class="list">
              <li v-for="(list, index) in item.data" :key="index" class="repair-item" @click="$router.push('/home/RepairsDetail/' + list.id)">
                <div class="image">
                  <span v-show="list.img[0]" v-lazy:background-image="list.img[0]"></span>
                  <img src="./images/default.png" alt="" v-show="!list.img[0]">
                </div>
                <div class="content">
                  <h2 class="titleh2">{{list.title}}</h2>
                  <p class="desc">{{list.content}}</p>
                  <div class="status">
                    <span class="text">状态:</span>
                    <span class="model0" v-show="list.status===0">已处理</span>
                    <span class="model1" v-show="list.status===1">未处理</span>
                  </div>
                  <div class="time">
                    {{list.create_time*1000 | dateFmt('YYYY-MM-DD HH:mm:ss')}}
                  </div>
                </div>
              </li>
              <li v-show="!item.data" class="no-data">
                <img src="../../assets/default.png" alt="" width="100" height="100">
                <p>抱歉！ 暂无数据</p>
              </li>
            </ul>
          </mt-tab-container-item>
        </mt-tab-container>
      </div>
    </div>
  </div>
</template>

<script>
import headTop from '../header/Header.vue'
import {getRepairsData} from '../../api/publishList.js'
// import BScroll from 'better-scroll'
export default {
  name: 'Repairs',
  data () {
    return {
      repairData: [],
      selected: 0,
      isFirstEnter: false
    }
  },
  created() {
    this.isFirstEnter = true
  },
  // 设置缓存从哪个页面返回
  beforeRouteEnter: (to, from, next) => {
    if (from.name === 'RepairsDetail') {
      to.meta.isBack = true
    }
    next()
  },
  activated () {
    if (!this.$route.meta.isBack || this.isFirstEnter) {
      this._getRepairsData()
    }
    this.$route.meta.isBack = false
    this.isFirstEnter = false
  },
  methods: {
    _getRepairsData () {
      getRepairsData().then(res => {
        if (res.code === 200) {
          this.repairData = res.data
        }
      })
    }
  },
  components: {
    headTop
  }
}
</script>

<style lang="scss" scoped>
  @import '../../common/sass/mixin.scss';
  .repairs {
    background-color: #fff;
    .banner-wrapper{
      position: fixed;
      top: 40px;
      left: 90px;
      z-index: 99;
      width: 100%;
      height: 100px;
      background-image: url('../home/images/xiaoqujiankong-banner@2x.jpg');
      background-repeat: no-repeat;
      background-size: cover;
    }
    .box {
      display: flex;
      position: absolute;
      top: 40px;
      bottom: 0px;
      width: 100%;
      overflow: hidden;
      .menu-wrapper{
        background: #f2f2f2;
        flex: 0 0 90px;
        width: 90px;
        position: absolute;
        top: 0;
        bottom: 0;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .mint-navbar{
          width: 90px;
          display: inline-block;
          .mint-tab-item.is-selected{
            border-bottom: none;
            color: #26a2ff;
            margin-bottom: 0px;
            background-color: #fff;
          }
          .mint-tab-item{
            @include border-bottom-1px(rgba(7, 17, 27, .1));
            background-color: #f2f2f2;
            &:last-child{
            @include border-none()
            }
          }
        }
      }
      .repair-wrapper {
        position: absolute;
        left: 90px;
        top: 0px;
        width: 100%;
        height: 100%;
        flex: 1;
        background-color: #fff;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        .list{
          padding-top: 105px;
          .no-data {
            width: 80%;
           text-align: center;
           color: #0b7ad9;
           font-size: 14px;
            img{
              padding-top: 20px;
            }
           p{
             margin-top: 5px;
           }
          }
        }
        .repair-item{
          display: flex;
          margin: 5px 10px 0px 5px;
          padding-bottom: 5px;
          // @include border-bottom-1px(rgba(7, 17, 27, .1));
          // &:last-child {
          //   @include border-none();
          // }
          .image{
            flex: 0 0 72px;
            width: 72px;
            height: 72px;
            margin-right: 10px;
            background: #f2f2f2;
            span{
              display: block;
              width: 100%;
              height: 100%;
              background-size: cover;
            }
            img{
              display: block;
              width: 100%;
              height: 100%;
            }
          }
          .content{
            flex: 1;
            margin-top: 2px;
            .titleh2{
              font-size: 14px;
            }
            .desc{
              width: 65%;
              margin-top: 5px;
              line-height: 16px;
              @include ellipsis(1)
            }
            .status{
              margin-top: 5px;
              font-size: 12px;
              .text{
                color: #666;
              }
              .model0{
                color: green;
              }
              .model1{
                color: red
              }
            }
            .time{
              margin-top: 5px;
              color: #666;
            }
          }
        }
      }
    }
  }
</style>
